<script setup lang="ts">
import { reactive } from 'vue'
import { ElButton, ElForm, ElRow, ElInput } from 'element-plus'
// import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import {
  updateAppParameterValuesApi,
  getAppParameterValuesDetailApi
} from '@/api/app-parameter-value'
import { AppParameterValue } from '@/api/app-parameter-value/types'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { FormItem } from '@/components/Form'
import { useCreate } from '@/hooks/web/useCreate'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const { push } = useRouter()

const back = () => {
  push('/settings/app-parameter-value')
}

const instance: AppParameterValue = reactive(new AppParameterValue())
const route = useRoute()

const { elFormRef, openMode, save, loading } = useCreate({
  instance,
  route,
  afterSave: back,
  updateApi: updateAppParameterValuesApi
})

onMounted(async () => {
  if (openMode.value === 'UPDATE') {
    const { data } = await getAppParameterValuesDetailApi(route.params.id as string)
    instance.init(data)
  }
})
</script>

<template>
  <ContentDetailWrap title="修改系统参数" @back="back">
    <template #right>
      <ElButton
        v-hasPermi="'settings:app-parameter-value:edit'"
        type="primary"
        :loading="loading"
        @click="save"
      >
        保存
      </ElButton>
    </template>

    <ElForm ref="elFormRef" :model="instance" label-width="100px">
      <ElRow style="max-width: 450px; margin: 0 auto">
        <FormItem :col-props="{ span: 24 }" label="代码" prop="id">
          <ElInput :model-value="instance.app_parameter_name?.id" maxlength="50" disabled />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="名称" prop="name">
          <ElInput :model-value="instance.app_parameter_name?.name" maxlength="200" disabled />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="描述" prop="description">
          <ElInput
            type="textarea"
            :model-value="instance.app_parameter_name?.description"
            :rows="3"
            disabled
          />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="参数值" prop="app_parameter_value">
          <ElInput v-model="instance.app_parameter_value" maxlength="200" />
        </FormItem>
      </ElRow>
    </ElForm>
  </ContentDetailWrap>
</template>
